Catholic is a Church website template created for churches, charities and other non profits. To customize this template, You should know some basic HTML and Computer Knowledge. If you don't have this knowledge, you can contact any Web Designer to do this task. Editing this template with out knowing things means, it will break the layout and design.
You can customize this template with any Code editing software. I recommend Dreamweaver if you are on Windows and Sublime Text for Mac users. Even you can customize the template with Notepad. So don't worry if you don't have these software.
To change the current logo to your Logo, Create it separately in any Graphic software and Export it in PNG format, so that the background will be transparent. You can use any width, but do not exceed 260px.
Once you've created the logo, copy it to HTML/images/ folder. Then link it in the Logo section in HTML file. If you are using same name, no need to change it in the HTML then.
Eg:
<img src="images/NAME_OF_YOUR_LOGO.png" alt="church-logo"></a>
Customizing gallery is simple. Just replace the big images and thumbnail with yours. You can also add/remove images by editing it in the HTML.
Here is how a single image code looks like
<div class="col-sm-4 col-md-3"> <a class="fancybox" href="images/gallery/img_gallery_7.jpg" data-fancybox-group="gallery" title="church image gallery"> <img src="images/gallery/thumb/gallery_thumb_7.jpg" class="img-responsive" width="270" height="270" alt="church image gallery"> </a> </div>
Email Subscription is powered by Mailchimp. You need a mailchimp account to get the form working. You will get an API code and List ID from Mailchimp dashboard. Copy it in subscribe.php (You also need a PHP server to check it. It will not work locally on your computer)
Eg:
$apiKey = 'PASTE_YOUR_API_KEY_HERE';
$listId = 'YOUR_LIST_ID';
...
...
$submit_url = "http://us8.api.mailchimp.com/1.3/?method=listSubscribe";
/* Replace "us8" with your actual datacenter */
To make the contact form working, Open contact.php file and change the email id to your email. No need to change any other code. Save and upload to your PHP server to test.
Contact form will work only on PHP servers. not on your local machine.
Follow these steps to make the Event Calendar work with your Google Calendar
You must first have a Google Calendar API Key:
Make your Google Calendar public:
Obtain your Google Calendar's ID:
Now open event-calendar.html file in code editor. Now scroll to bottom, where you can see the script for Event Calendar.
Add your API Key and Calendar ID inside the quotes. See how it looks like below.
$(document).ready(function() {
$('#event-calendar').fullCalendar({
googleCalendarApiKey: 'YOUR_API_KEY_HERE',
events: {
googleCalendarId: 'YOUR_CALENDAR_ID_HERE'
},
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
That's all. Now refresh the HTML page in browser and you will see the events.
To change the embed maps in the contact page, Open maps.google.com and search your address. Then click on the settings (Cog) icon on the right bottom. Then click Embed & share. Click on the next tab where you can see Embed code starting with <iframe ....
Copy the code and replace the existing code in contact.html file. You can also remove the width & height attribute as we area already giving the value via CSS.
You can add new pages by copy pasting the HTML file and renaming. Choose a matchng HTML page, eg: if you are creating new Ministry page, you can duplicate the ministry.html and rename it to ministry-xxx.html. Then you can edit this page.
If you want to delete a page, Just delete the HTML file and remove the link from all other HTML pages.
Please note that this an HTML template and not connected with any Content Management system, so the blog you see is just static. If you want you can integrate it to any CMS like Wordpress, Tumblr etc. This is not a part of this Template.
For other customizations like Text changing, you can simply do it in any code editing software. Just replace the current text with your text. Then Save it. That's all
You are entitled to get future updates of this template. You can re-download the file from Themeforest => Download page. If you have any suggstions or feature request or if you found any bug with existing template, you can send an email to support@surjithctly.in I will update it in my next version.
If you have any issues customizing, or if you need any help regarding this template, or to just Say Hi, Please contact me on support@surjithctly.in
Great Images provided by Unsplash. A big thanks to the team